$(function () {
    let canvas = document.getElementById('canvas');
    let context = canvas.getContext('2d');
    let preview = document.getElementById('preview');
    let downloadLink = document.getElementById('downloadLink');
    let chunks = [];

    let startRecordingButton = document.getElementById('luping');
    let stopRecordingButton = document.getElementById('stopRecording');

    let mediaStream;

    startRecordingButton.onclick = startRecording;
    stopRecordingButton.onclick = stopRecording;

    async function startRecording() {
        mediaStream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
        let recorder = new MediaRecorder(mediaStream);

        recorder.ondataavailable = function (event) {
            chunks.push(event.data);
        };

        recorder.onstop = function () {
            $("#downloadLink").show()
            let blob = new Blob(chunks, { type: 'video/mp4' });
            let url = URL.createObjectURL(blob);
            preview.src = url;
            downloadLink.href = url;
        };

        recorder.start();
    }

    function stopRecording() {
        alert(111)
        if (mediaStream) {
            mediaStream.getTracks().forEach(track => track.stop());
        }
        chunks = [];
    }
})